About This Layout

This page is styled with CSS. It uses negative margins create a feature-rich three-column liquid layout.

Key Features

Resize this page to see the following:

  1. The center content column changes width as you change the browser width.
  2. The min-width setting prevents the content being crushed down to nothing; once the content reaches minimum width, the layout gets no narrower.
  3. The max-width setting prevents the content getting too wide; once it reaches maximum width, the layout gets no wider and the auto margins center the layout in the browser window.
  4. The footer sits below whichever column is longest.

If you want this layout to work completely in IE6, you must add some javascript because IE6 does not natively support the min-width and max-width CSS properties.

The Files

This example uses two CSS files to style the page:

  1. three_column_liquidCSS.css
  2. text_n_colorsCSS.css

The XHTML markup file is called:

  • three column liquid layout.html

Note: Inner <div> elements inside each of the five main <div> elements allow padding and borders to be applied without affecting the width of the main structural <div> elements.

Promo area

This column has a negative margin applied to it to draw it inside of the full width content div. A positive margin on the content div ensures there will be room for it. follow W3C on Twitter       follow W3C on identi.ca